// 登录
// 获取标签,发送请求
const login_form = document.querySelector('.login>form')
const login_name = document.querySelector('.login .username')
const login_pwd = document.querySelector('.login .password')
const hint = document.querySelector('.hint')

// 获取要切换的盒子
const cut = document.querySelectorAll('.cut>li')
const show_box = document.querySelectorAll('.show_box>li')

// 切换登录注册页面
cut.forEach((item,index)=>{
    item.onclick=()=>{
        for(let i = 0; i<show_box.length;i++){
            cut[i].classList.remove('active')
            show_box[i].classList.remove('active')
        }
        cut[index].classList.add('active')
        show_box[index].classList.add('active')
    }
})

// 设置点击事件
login_form.addEventListener('submit',e=>{
    e = e || window.event
    try{e.preventDefault()} catch(err){e.returnValue=false}

    // 获取input中填写的数据
    const l_name = login_name.value
    const l_pwd = login_pwd.value
    console.log(l_name,l_pwd)
    // 判断非空
    if(!l_name || !l_pwd) return alert('请完整填写表单')

    // 发送请求
    const xhr = new XMLHttpRequest()
    xhr.open('POST','../../server/login.php')
    xhr.onload=()=>loginHandler(xhr)
    xhr.setRequestHeader('content-type','application/x-www-form-urlencoded')
    xhr.send(`username=${l_name}&password=${l_pwd}`)
})
function loginHandler(xhr){
    // 接收后端的返回值
    const res = JSON.parse(xhr.responseText)
    // const res = xhr.responseText
    console.log(res)
    // const res = xhr.responseText
    console.log(res)

    if(res.code === 0){
        hint.classList.add('active')
        return
    }
    // 登录成功的话,将数据记录在localStorage中
    window.localStorage.setItem('login',1)
    window.localStorage.setItem('id',res.info[0].Id)
    window.localStorage.setItem('nick',res.info[0].nickname)

    // 获取其他页面写入的url地址,有的话跳转到url地址 没有跳转首页
    const url =  window.localStorage.getItem('url')
    window.localStorage.removeItem('url')

    window.location.href = `./${url ? url : 'index'}.html`
}

// 注册
// 获取注册的标签
const register_form = document.querySelector('.register>form')
const register_name = document.querySelector('.register .username')
const register_pwd = document.querySelector('.register .password')
const register_rpwd = document.querySelector('.register .rpassword')
const register_nick = document.querySelector('.register .nickname')
const register_err = document.querySelector('.register .error')

// 添加事件
register_form.addEventListener('submit',e=>{
    e = e || window.event

    try{e.preventDefault()} catch(err){e.returnValue=false}

    // 获取标签内的内容
    const r_name = register_name.value
    const r_pwd = register_pwd.value
    const r_rpwd = register_rpwd.value
    const r_nick = register_nick.value

    // 非空判断
    if(!r_name || !r_pwd || !r_rpwd ||!r_nick) return alert('请完整输入表单')

    let reg = /^\w{6,12}$/
    let res = reg.test(r_pwd)
    if(!res)return alert('请输入6-12位密码,包含数字/字母/下划线 ^_^')

    // 判断两次密码是不是一致
    if(r_pwd !== r_rpwd) return alert('两次输入的密码不一致,请核实')

    // 发送请求
    const r_xhr = new XMLHttpRequest()
    r_xhr.open('POST','../../server/register.php')
    r_xhr.onload=()=>registerHandler(r_xhr)
    r_xhr.setRequestHeader('content-type','application/x-www-form-urlencoded')
    r_xhr.send(`username=${r_name}&password=${r_pwd}&nickname=${r_nick}`)
})

function registerHandler(r_xhr){
    const r_res = JSON.parse(r_xhr.responseText)
    // const r_res = r_xhr.responseText
    console.log(r_res)

    if(r_res.code !== 1){
        register_err.classList.add('active')
        return
    }

    window.alert('注册成功,点击登录进行登录操作 ^_^')

}